<template>
  <view class="container">
    <view class="bg"></view>
    <view class="content">
      <view @click="showLogin" class="userinfo flex flex-a-c">
        <image
          class="logo"
          src="@/assets/images/mine/default-user-logo.png"
        ></image>
        <view class="flex flex-c flex-bt">
          <text class="user-name">登录/注册</text>
          <view class="flex flex-a-c">
            <image
              class="coin-icon"
              src="@/assets/images/mine/coin.png"
            ></image>
            <text class="coin-text">M币 123456</text>
          </view>
        </view>
      </view>
      <view class="vip flex flex-bt">
        <view class="flex flex-a-c">
          <img class="icon mr-15" src="@/assets/images/mine/vip-icon.png" />
          <img class="title" src="@/assets/images/mine/vip-title.png" />
        </view>
        <view class="flex flex-a-c">
          <text class="mr-15">最低0.5元/天</text>
          <button>立即开通</button>
        </view>
      </view>
      <view class="func flex">
        <view class="item flex flex-c">
          <img src="@/assets/images/mine/history.png" />
          <text>播放历史</text>
        </view>
        <view class="item flex flex-c">
          <img src="@/assets/images/mine/order.png" />
          <text>消费记录</text>
        </view>
        <view class="item flex flex-c">
          <img src="@/assets/images/mine/order-history.png" />
          <text>我的订单</text>
        </view>
      </view>
      <view class="menu">
        <view
          class="menu-item flex flex-bt"
          v-for="(item, index) in menus"
          :key="index"
        >
          <view class="flex flex-a-c" @click="agreeTipVisiable = true">
            <img class="icon" :src="getIcon(item.icon)" />
            <text class="title">{{ item.title }}</text>
          </view>
          <view class="flex flex-a-c">
            <text class="des" v-if="item.des">{{ item.des }}</text>
            <img class="arrow" src="@/assets/images/common/arrow-right.png" />
          </view>
        </view>
      </view>
    </view>
    <Login @hide="show = false" v-if="show" />
  </view>
</template>

<script>
import Login from "@/components/login/index";
export default {
  components: { Login },
  data() {
    return {
      menus: [
        {
          title: "我的点赞",
          icon: "like",
          des: "",
        },
        {
          title: "在线客服",
          icon: "service",
          des: "",
        },
        {
          title: "投诉与反馈",
          icon: "callback",
          des: "",
        },
        {
          title: "关于麦萌短剧",
          icon: "about",
          des: "v1.0.1",
        },
      ],
      show: false,
    };
  },
  onLoad() {},
  methods: {
    getIcon(icon) {
      return require("../../assets/images/mine/" + icon + ".png");
    },
    showLogin() {
      console.log("login");
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
}
.bg {
  width: 750rpx;
  height: 350rpx;
  position: absolute;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(162, 224, 250, 0.44) 0%,
    rgba(162, 224, 250, 0) 100%
  );
}
.content {
  padding: 0 30rpx;
  box-sizing: border-box;
}
.userinfo {
  padding-top: 30rpx;
  .logo {
    width: 92rpx;
    height: 92rpx;
    margin-right: 30rpx;
  }
  .user-name {
    font-size: 36rpx;
    margin-bottom: 15rpx;
  }
  .coin-icon {
    width: 32rpx;
    height: 32rpx;
    position: relative;
    left: -2rpx;
    margin-right: 2rpx;
  }
  .coin-text {
    color: #757575;
    font-size: 26rpx;
    font-family: D-DIN-DIN-Bold;
  }
}
.vip {
  height: 135rpx;
  background: url("@/assets/images/mine/vip-bg.png") no-repeat;
  background-size: cover;
  border-radius: 20rpx;
  overflow: hidden;
  margin-top: 46rpx;
  padding: 0 30rpx;
  font-size: 25rpx;
  color: #7d4c12;
  .mr-15 {
    margin-right: 15rpx;
  }
  button {
    width: 169rpx;
    height: 58rpx;
    background-color: #7d4c12;
    color: #ffe6ab;
    font-size: 27rpx;
    border-radius: 58rpx;
    line-height: 58rpx;
    border: 0;
  }
  .icon {
    width: 62rpx;
    height: 62rpx;
  }
  .title {
    width: 128rpx;
    height: 36rpx;
  }
}
.func {
  margin-top: 88rpx;
  .item {
    position: relative;
    flex: 1;
    height: 131rpx;
    background-color: #f7fafa;
    border-radius: 23rpx;
    margin-right: 27rpx;
    align-items: center;
    font-size: 27rpx;
    color: #1c1e1f;
    &:nth-child(3) {
      margin-right: 0;
    }
    img {
      width: 92rpx;
      height: 92rpx;
      position: relative;
      top: -42rpx;
    }
    text {
      position: absolute;
      top: 73rpx;
    }
  }
}
.menu {
  margin-top: 115rpx;
  &-item {
    line-height: 1;
    margin-bottom: 62rpx;
    .icon {
      width: 46rpx;
      height: 46rpx;
    }
    .title {
      font-size: 31rpx;
      color: #1c1e1f;
      margin-left: 19rpx;
    }
    .arrow {
      width: 30rpx;
      height: 30rpx;
    }
    .des {
      color: #9fa1a1;
      font-size: 31rpx;
      margin-right: 11rpx;
    }
  }
}
</style>
